<template>
	<view class="toggle-switch" @click="toggleSwitch">
		<view class="switch-button" :class="{ active: isActive }">
			<image :src="isActive ?$IMG_URL('/static/coach/list1.png'):$IMG_URL('/static/coach/list2.png')" mode="" class="list"></image>
			<text>列表</text>
		</view>
		<view class="switch-button" :class="{ active: !isActive }">
			<image :src="!isActive?$IMG_URL('/static/coach/map1.png'):$IMG_URL('/static/coach/map2.png')" mode="" class="map"></image>
			<text>地图</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: true, // 控制开关状态的变量
			};
		},
		methods: {
			toggleSwitch() {
				this.isActive = !this.isActive; // 切换开关状态
				this.$emit('change', this.isActive); // 触发自定义事件，通知父组件状态变化
			},
		},
	};
</script>

<style scoped>
	.list {
		width: 22rpx;
		height: 22rpx;
		margin-right: 11rpx;
	}

	.map {
		width: 24rpx;
		height: 22rpx;
		margin-right: 11rpx;
	}

	.toggle-switch {
		display: flex;
		width: 272rpx;
		height: 72rpx;
		background: #f6f6f6;
		border-radius: 16rpx;
		overflow: hidden;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx;
	}

	.switch-button {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 128rpx;
		height: 56rpx;
		background: #73F0EA;
		border-radius: 12rpx;
		font-size: 16px;
		font-size: 28rpx;
		transition: background-color 0.3s ease;
		font-family: PingFang SC, PingFang SC-Bold;
	}

	.switch-button.active {
		background-color: #73F0EA;
		/* 激活状态的背景色 */
		color: #fff;
		font-weight: 700;
	}

	.switch-button:not(.active) {
		background-color: #F6F6F6;
		/* 非激活状态的背景色 */
		color: #B6B6B6;
		font-weight: 400;
	}
</style>